<!--
    由于 Svelte 的反应性是由赋值语句触发的，因此使用数组的诸如 push 和 splice 之类的方法就不会触发自动更新。例如，点击按钮就不会执行任何操作。
    解决该问题的一种方法是添加一个多余的赋值语句：
    function addNumber() {
        numbers.push(numbers.length + 1);
        numbers = numbers;
    }
    但还有一个更惯用的解决方案：
    function addNumber() {
        numbers = [...numbers, numbers.length + 1];
    }
    你可以使用类似的模式来替换 pop、shift、unshift 和 splice 方法。
    赋值给数组和对象的 属性（properties） （例如，obj.foo += 1 或 array[i] = x）与对值本身进行赋值的方式相同。
    function addNumber() {
        numbers[numbers.length] = numbers.length + 1;
    }
    一个简单的经验法则是：被更新的变量的名称必须出现在赋值语句的左侧。例如下面这个：
    const foo = obj.foo;
    foo.bar = 'baz';
    就不会更新对 obj.foo.bar 的引用，除非使用 obj = obj 方式。
-->

<script>
    let obj = {
        name: 'ych',
        age: 27
    }

    $: console.log(obj)

    function changeAGE() {
        obj.age ++
        obj = obj
    }

    let arr01 = [1, 2, 3]
    let num = 0

    $: console.log(arr01)

    function pushNumber() {
        // 方法一
        // arr01.push(num)
        // arr01 = arr01
        // 方法二
        arr01 = [...arr01, num]
    }
</script>
<input type="text" value="{num}">
<button on:click={changeAGE}>改变对象属性</button>
<button on:click={pushNumber}>向数组插入数据</button>
